<html>

<head>
    <meta charset="utf-8">
    <title>玩58新媒体注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="templets/default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="templets/default/css/index.css"/>

    <!--选择列表插件-->
    <link rel="stylesheet" type="text/css" href="templets/default/css/mui.picker.css" />
    <link rel="stylesheet" type="text/css" href="templets/default/css/mui.poppicker.css" />
    <!--App自定义的css-->
    <style type="text/css">
        .get-code-box input {
            float: left;
            padding: 10px 15px;
            width: 60%;
            font-size: 14px;
        }

        .get-code-box label {
            float: right;
            width: 40%;
            font-size: 14px;
        }
        body, .mui-content {
            background-color: #fff;
        }
        .mui-input-group {
            background-color: transparent;
        }

        .mui-input-row .mui-btn + input, .mui-input-row label + input, .mui-input-row:last-child {
            background: #fff;
        }

        .mui-card {
            border-radius: 10px;
        }

        .mui-card {
            box-shadow: none;
        }

        .phone-to-sumin-box {
            width: 100%;
            padding: 10px;
        }

        .phone-to-sumin-box button {
            width: 100%;
        }

        .mui-checkbox a {
            color: #007aff;
        }
        .mui-input-group:before{
            height: 0;
        }
        .mui-radio label{
            padding: 11px 25px;
            color:#666;
        }
        .invitationCode1-box{
            position: relative;
            margin-top: 30px;
        }
        .mui-input-row{
            overflow: initial;
        }
        .invitationCode1-box:before{
            content: '请核对上级邀请码';
            position: absolute;
            top: -15px;
            left: 15px;
            color: red;
        }
    </style>

</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="back-tohost mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">注册</h1>
</header>
<div class="mui-content">
    <form class="mui-input-group">
        <input type="hidden" name="userId" id="userId">
        <div class="mui-input-row mui-card">
            <input type="text" class="mui-input-clear" id="userphone" placeholder="手机号">
        </div>
        <div class="mui-input-row get-code-box mui-card">
            <input type="number" class="mui-input-clear" id="codenumb" placeholder="请输入短信验证码">
            <label class="getcode-btn" id="getcode-btn">获取验证码</label>
        </div>
        <div class="mui-input-row mui-card">
            <input type="text" class="mui-input-clear" name="userName" id="userName" placeholder="昵称">
        </div>
        <div class="mui-input-row mui-card">
            <input type="password" class="mui-input-clear" name="password" id="password" placeholder="请输入密码">
        </div>
        <div class="mui-input-row mui-radio">
            <label>男</label>
            <input name="sex"  type="radio" value="1" checked>
        </div>
        <div class="mui-input-row mui-radio">
            <label>女</label>
            <input name="sex" type="radio" value="2">
        </div>
        <div class="mui-input-row mui-card">
            <input type="text" placeholder="所在地区" name="addressName" readonly id='addressName'>
        </div>
        <div class="mui-input-row mui-card">
            <input type="text" class="" name="invitationCode1" id="invitationCode1" placeholder="上级邀请码" readonly>
        </div>

    </form>
    <!--<div class="mui-input-row mui-checkbox mui-left">
        <label>已阅读并同意 <a href="loding.html">xx协议</a></label>
        <input name="checkbox" value="Item 1" type="checkbox" checked>
    </div>-->
    <div class="phone-to-sumin-box">
        <button type="button" class=" mui-btn mui-btn-warning  phone-to-sumin" data-loading-text="提交中">提交</button>
    </div>

</div>
</body>
<script src="templets/default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="templets/default/js/mui.min.js"></script>
<script src="templets/default/js/index.js"></script><script src="templets/default/js/public.js"></script>
<!--<script src="templets/default/js/vconsole.js"></script>-->
<!--选择组件-->
<script src="templets/default/js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="templets/default/js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="templets/default/js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script>

    $(function () {
        var param1 = "code1";
        var reg1 = new RegExp("(^|&)" + param1 + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r1 = window.location.search.substr(1).match(reg1); //匹配目标参数

        if(r1!=null){
            // localStorage.setItem("invitationCode", r1[2]);
            $("#invitationCode1").val(r1[2]);
        }


        // localStorage.getItem("invitationCode");
        /*var only1 = localStorage.getItem("only1");
        if (only1 == null) {
            localStorage.setItem("only1", "1");
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed752d87990909bb&redirect_uri=http://newst.whilte.com/templets/html/register.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
        }

        // localStorage.clear();
        var param = "code";
        var reg = new RegExp("(^|&)" + param + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        console.log("r:" + r);*/
        // var invitationCode = localStorage.getItem("invitationCode");
        /*if (r != null) {
            var code = r[2];
            $.ajax({
                url: website + "/Share1/toOpenId",
                type: "post",
                dataType: "json",
                data: {
                    code: code,
                    // invitationCode: invitationCode
                },
                success: function (data) {



                }
            });
        }
        ;*/

        // localStorage.removeItem('only1');

    });
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });

    mui('header').on('tap', '.back-tohost', function (e) {
        mui.openWindow({
            url: "templets/html/login.html",
        });
    });

    /*var checked = true;
    mui('body').on('change', 'input[name=checkbox]', function () {
        checked = this.checked ? "true" : "false";
    });*/

    // 省份
    var province;
    var city;
    var codeNewPhone;
    mui("body").on('tap', '.phone-to-sumin', function () {
        var userphone = $("#userphone").val();
        var codenumb = $("#codenumb").val();
        var userName = $("#userName").val();
        var password = $("#password").val();
        var sex = $("input:radio:checked").val();
        var country = '中国';
        var invitationCode1 = $("#invitationCode1").val();

        if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(userphone))) {
            mui.toast('请输入正确的手机号');
            return false;
        } else if (codenumb == null || codenumb=='') {
            mui.toast('请输入验证码');
            return false;
        }else if(userName == null || userName==''){
            mui.toast('昵称不能为空');
            return false;
        }else if(password == null || password==''){
            mui.toast('密码不能为空');
            return false;
        }else if(password.length < 6){
            mui.toast('密码最小为6位数');
            return false;
        }else if(city==null || province==null || city=='' || province ==''){
            mui.toast('请选择所在地区');
            return false;
        } else if (codeNewPhone != userphone) {
            mui.toast('手机号和发送验证码手机号不一致!');
            return false;
        } else {
            mui('.phone-to-sumin').button('loading');//切换为loading状态

            var formData = new FormData($('form')[0]);

            console.log(formData);
            $.ajax({
                url: website+"/UserController/register",
                type: "post",
                data: {
                    "userId":0,
                    "userName": userName,
                    "password":password,
                    "invitationCode1":invitationCode1,
                    "sex":sex,
                    "account":userphone,
                    "code1":codenumb,
                    "country":"中国",
                    "province":province,
                    "city":city
                },
                success: function (data) {
                    console.log(data);
                    mui.toast(data.msg);
                    if(data.msg=='注册成功'){
                        mui.openWindow({
                            url: "templets/html/login.html",
                        });
                    }
                    mui('.phone-to-sumin').button('reset');

                }
            })

        }
    });



    mui('.mui-input-group').on('tap', '#getcode-btn', function (e) {
        settime(this);
        console.log(211);
    });
    var countdown = 60;
    // 有ajax
    function settime(obj) {
        var userphone = $("#userphone").val();

        if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(userphone))) {
            mui.toast('请输入正确的手机号', {duration: 'long', type: 'div'})
            return false;
        }
        obtain(obj);
    }
    //发送验证码
    function obtain(obj) {
        $("#getcode-btn").removeAttr("id","getcode-btn");

        var userphone = $("#userphone").val();
        $.ajax({
            url: website+"/UserController/obtain",
            type: "post",
            data: {"phoneNumber": userphone},
            success: function (data) {
                console.log(data);
                codeNewPhone=userphone;
                mui.toast('验证码'+data.msg);
                code1(obj);
            }
        })
    }
    function countdown1(obj) {
        countdown--;
        code1(obj);
    }
    function code1(obj) {
        var code = $(obj);
        if (countdown == 0) {
            code.attr('disabled', false);
            code.text("获取验证码");
            countdown = 60;
            $(".getcode-btn").attr("id", "getcode-btn");
            return;
        } else {
            code.text("重新发送(" + countdown + ")");
            code.attr('disabled', true);
            setTimeout(function () {
                countdown1(obj)
            }, 1000);
        }
    }






    (function($, doc) {
        $.init();
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //-----------------------------------------
            //					//级联示例
            var cityPicker = new $.PopPicker({
                layer: 2
            });
            cityPicker.setData(cityData);
            var showCityPickerButton = doc.getElementById('addressName');
            var cityResult = doc.getElementById('addressName');
            showCityPickerButton.addEventListener('tap', function(event) {
                cityPicker.show(function(items) {
                    province=items[0].text;
                    city=items[1].text;
                    cityResult.value = items[0].text + " " + items[1].text;

                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);


        });
    })(mui, document);






</script>

</html>
